<template>
  <div>
    <div class="headmainbox">
      <div class="headleftbox" @click="gohome">
        <img src="@/assets/images/banner.png" alt="" class="banner" />

        <!-- <img :src="baseurl + userdata.headPortraitUrl.value" alt="" /> -->
      </div>
      <div class="headrightbox">
        <div class="headuserbox">
          <a-dropdown trigger="click">
            <a-avatar
              :imageUrl="baseurl + userdata.headPortraitUrl.value"
            ></a-avatar>
            <div class="username">{{ userdata.username }}</div>
            <template #content>
              <a-doption>
                <a-space @click="gouser">
                  <icon-user />
                  <span> 个人中心 </span>
                </a-space>
              </a-doption>
              <a-doption>
                <a-space @click="uploadShow = true">
                  <icon-pen-fill />
                  <span> 修改密码 </span>
                </a-space>
              </a-doption>
              <a-doption>
                <a-space @click="handleLogout">
                  <icon-user />
                  <span> 退出登录 </span>
                </a-space>
              </a-doption>
            </template>
          </a-dropdown>
        </div>
      </div>
    </div>
    <div class="menleftbox">
      <div
        class="menitem"
        v-for="item in mentdata"
        :key="item.id"
        @click="taskfn(item.id)"
        :class="mentid == item.id ? 'menitemhover' : ''"
      >
        <div class="tool">
          <img
            :src="item.srcac"
            alt=""
            class="active"
            v-if="mentid != item.id"
          />
          <img :src="item.src" alt="" class="normal" v-if="mentid != item.id" />
          <img :src="item.srcac" alt="" v-if="mentid == item.id" />
        </div>
        {{ item.name }}
      </div>
      <div class="mentlogo">
        <img src="@/assets/images/mentlogo.png" alt="" />
      </div>
    </div>
    <!-- 修改密码弹窗 -->
    <a-modal
      class="df"
      v-model:visible="uploadShow"
      @cancel="uploadCancel"
      :on-before-ok="uploadCheck"
      :mask-closable="false"
      unmountOnClose
      width="450px"
    >
      <template #title> 修改密码 </template>
      <a-form ref="uploadModel" :rules="uploadRules" :model="uploadForm">
        <a-row style="margin-bottom: 16px">
          <a-form-item field="oldPassword" label="旧密码">
            <a-input-password
              v-model="uploadForm.oldPassword"
              placeholder="请输入旧密码"
              :style="{ width: '320px' }"
              :defaultVisibility="false"
              allow-clear
            />
          </a-form-item>
          <a-form-item field="newPassword" label="新密码">
            <a-input-password
              v-model="uploadForm.newPassword"
              placeholder="请输入新密码"
              :style="{ width: '320px' }"
              :defaultVisibility="false"
              allow-clear
            />
          </a-form-item>
          <a-form-item field="nnewPassword" label="确认密码">
            <a-input-password
              @input="erpassfn"
              v-model="uploadForm.nnewPassword"
              placeholder="请输入新密码"
              :style="{ width: '320px' }"
              :defaultVisibility="false"
              allow-clear
            />
          </a-form-item>
          <div class="lc" v-if="byyshow"> 两次输入密码不一致,请重新输入</div>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import { storeToRefs } from 'pinia';
  import { Message } from '@arco-design/web-vue';
  import { useSelectionStore, useUserStore } from '@/store';
  import { upUser } from '@/api/user';
  import useUser from '@/hooks/user';
  import useLoading from '@/hooks/loading';
  const { loading, setLoading } = useLoading(true);
  const { logout } = useUser();
  const userStore = useUserStore();
  const userdata = storeToRefs(userStore);
  // console.log('获取当前用户信息', userdata);

  import { toRefs } from 'vue';
  const props = defineProps({
    //子组件接收父组件传递过来的值
    ymbsid: String,
  });
  // console.log('接受数据父组', props);

  const mentdata = ref([
    {
      id: 1,
      name: '今日排班',
      src: new URL('@/assets/images/ment1.png', import.meta.url).href,
      srcac: new URL('@/assets/images/ment1ac.png', import.meta.url).href,
    },
    {
      id: 2,
      name: '排班管理',
      src: new URL('@/assets/images/ment2.png', import.meta.url).href,
      srcac: new URL('@/assets/images/ment2ac.png', import.meta.url).href,
    },
    {
      id: 3,
      name: '时间锁定',
      src: new URL('@/assets/images/ment3.png', import.meta.url).href,
      srcac: new URL('@/assets/images/ment3ac.png', import.meta.url).href,
    },
    {
      id: 4,
      name: '个人中心',
      src: new URL('@/assets/images/ment4.png', import.meta.url).href,
      srcac: new URL('@/assets/images/ment4ac.png', import.meta.url).href,
    },
  ]);

  const router = useRouter();
  // 返回首页
  const gohome = () => {
    router.push({
      name: 'home',
    });
  };
  const gouser = () => {
    mentid.value = 4;
    router.push({
      name: 'user',
    });
  };

  const mentid = ref(1);
  mentid.value = props.ymbsid;
  const taskfn = (id) => {
    mentid.value = id;
    if (id == 4) {
      router.push({
        name: 'user',
      });
    }
    if (id == 1) {
      router.push({
        name: 'home',
      });
    }
    if (id == 3) {
      router.push({
        name: 'saveRest',
      });
    }
    if (id == 2) {
      router.push({
        name: 'Scheduling',
      });
    }
  };

  const uploadShow = ref(false);
  const uploadCancel = () => {
    uploadForm.value = [];
    byyshow.value = false;
    uploadShow.value = false;
  };

  const uploadCheck = (done) => {
    // if (loading.value) {
    //   done(false);
    //   return;
    // }
    console.log('执行了3', byyshow.value);
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1500);
    console.log('执行了1', byyshow.value);
    uploadModel.value.validate(
      async (errors: undefined | Record<string, ValidatedError>) => {
        console.log('执行了', errors, byyshow.value);
        if (!errors && !byyshow.value) {
          const params = new URLSearchParams();
          params.append('password', uploadForm.value.newPassword);

          upUser(params).then((res) => {
            if (res.code == '200') {
              Message.success({
                //   content: res.message,
                content: '修改成功!',
              });
              uploadForm.value = [];
              byyshow.value = false;
              uploadShow.value = false;
              handleLogout();
              done(true);
            } else {
              Message.success({
                //   content: res.message,
                content: res.message,
              });
              done(false);
            }
          });
        } else {
          done(false);
        }
      }
    );
  };
  const byyshow = ref(false);
  const uploadRules = {
    //  /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!#$%^&*])[\da-zA-Z!#$%^&*]{8,16}$/

    oldPassword: [
      {
        required: true,
        message: '请输入旧密码',
      },
    ],
    newPassword: [
      {
        required: true,
        message: '请输入新密码',
      },
    ],
    nnewPassword: [
      {
        required: true,
        message: '请输入新密码',
      },
      //   {
      //     match: /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*?])[^\s]{6,16}$/,
      //     message: '6-16位的,需包含大写字母、小写字母、特殊符号及数字',
      //   },
    ],
  };
  const uploadForm = ref({
    oldPassword: '',
    newPassword: '',
    nnewPassword: '',
  });
  const uploadModel = ref();
  const erpassfn = (value) => {
    uploadModel.value.validateField('nnewPassword', (errorMessage) => {
      if (!errorMessage) {
        console.log('通过校验');
        if (uploadForm.value.nnewPassword != '') {
          if (value != uploadForm.value.newPassword) {
            byyshow.value = true;
          } else {
            byyshow.value = false;
          }
        }
      }
    });
  };
  const handleLogout = () => {
    logout();
  };
  const baseurl = ref();
  baseurl.value = window.config.VUE_APP_BASE_IMG;
  // console.log('当前及地址', baseurl.value);
</script>

<style scoped></style>
